<template>
    <page-main>
        <el-radio-group v-model="templateSelected">
            <el-radio-button :label="1">我的模板</el-radio-button>
            <el-radio-button :label="2">本地模板</el-radio-button>
            <el-radio-button :label="3">线上模板</el-radio-button>
        </el-radio-group>
        <div class="template-sort flex">
            <ul class="flex  align-center w100">
                <li>
                    <svg-icon name="el-icon-warning"/>
                    分类
                </li>
                <li v-for="(item,index) in dataSort.list" :key="index+1" class="template-sort-li"
                    :class="index === dataSort.active ? 'active':''"
                    @click="clickSort(index)"
                >
                    {{ item }}
                </li>
            </ul>
        </div>
        <div
            class="template-collapse"
        >
            <el-collapse v-model="defaultCollapse">
                <el-collapse-item name="1">
                    <div slot="title" class="collapse-title">
                        <svg-icon name="dashboard" class="collapse-title-icon"/>
                        线上实训模板
                    </div>
                    <el-row :gutter="20">
                        <no-data v-if="onlineList.length === 0" @click="getOfflineList"/>
                        <el-col v-for="(item,index) in onlineList" :key="index+1" :lg="6" :md="8" :sm="12">
                            <el-card shadow="hover" class="collapse-card">
                                <router-link to="/practice/template/detail?id=1">
                                    <el-image :src="item.cover" lazy/>
                                    <div style="padding: 14px;">
                                        <span>{{ item.title }}</span>
                                    </div>
                                </router-link>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <el-collapse-item name="2" class="collapse-title">
                    <div slot="title" class="collapse-title">
                        <svg-icon name="dashboard" class="collapse-title-icon"/>
                        线下实训模板
                    </div>
                    <no-data v-if="offlineList.length === 0" @click="getOfflineList"/>
                    <el-row v-else :gutter="20">
                        <el-col v-for="(item,index) in offlineList" :key="index+1" :lg="6" :md="8" :sm="12">
                            <el-card shadow="hover" class="collapse-card">
                                <router-link to="/practice/template/detail">
                                    <el-image :src="item.cover" lazy/>
                                    <div style="padding: 14px; font-size: 15px;">
                                        <span>{{ item.title }}</span>
                                    </div>
                                </router-link>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-collapse-item>
            </el-collapse>
        </div>
    </page-main>
</template>

<script>
import PageMain from '@/components/PageMain'
import SvgIcon from '@/components/SvgIcon'
import NoData from '@/views/empty/noData'

export default {
    name: 'Practice',
    components: {NoData, SvgIcon, PageMain},
    data() {
        return {
            templateSelected: 1,
            defaultCollapse: ['1', '2'],
            dataSort: {
                list: ['全部', '物理', '化学', '生物', '地理'],
                active: 0
            },
            onlineList: [
                {
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: ' 见习模板-大一-物理'
                },
                {
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: ' 见习模板-大一-物理'
                },
                {
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: ' 见习模板-大一-物理'
                },
                {
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: ' 见习模板-大一-物理'
                },
                {
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: ' 见习模板-大一-物理'
                },
                {
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: ' 见习模板-大一-物理'
                }
            ],
            offlineList: []
        }
    },
    methods: {
        clickSort(index) {
            this.dataSort.active = index
        },
        getOfflineList() {
            this.offlineList = [
                {
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: ' 见习模板-大一-物理'
                },
                {
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: ' 见习模板-大一-物理'
                },
                {
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: ' 见习模板-大一-物理'
                },
                {
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: ' 见习模板-大一-物理'
                },
                {
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: ' 见习模板-大一-物理'
                },
                {
                    cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
                    title: ' 见习模板-大一-物理'
                }
            ]
        }
    }
}
</script>

<style scoped lang="scss">
::v-deep .el-collapse {
    border: none;
}
::v-deep .el-collapse-item__wrap {
    border: none;
}
::v-deep .el-collapse-item__arrow {
    font-size: 18px;
}
::v-deep .el-collapse-item__header {
    background-color: #f6f6f6;
    border-radius: 6px;
    padding: 0 15px;
    margin-bottom: 15px;
}
.template-sort {
    border: 0.5px solid #dedede;
    height: 80px;
    padding: 40px;
    margin-top: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    ul {
        li {
            width: 11%;
            &:first-child {
                color: red;
                border: none;
                font-size: 16px;
            }
        }
        .template-sort-li {
            border: 1px solid #dedede;
            height: 40px;
            width: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            cursor: pointer;
            &:hover {
                border: 1px solid $bg-primary;
            }
        }
        .template-sort-li.active {
            border: 1px solid $bg-primary;
            color: $bg-primary;
        }
    }
}
.template-collapse {
    margin-top: 15px;
    .collapse-title {
        font-size: 17px;
        .collapse-title-icon {
            font-size: 15px;
            color: $bg-primary;
        }
    }
    ::v-deep .el-card__body {
        padding: 0;
    }
    .collapse-card {
        margin-bottom: 20px;
        cursor: pointer;
    }
}
</style>
